import { View, Navigator, ScrollView, Image } from "@tarojs/components";
import { AtList, AtListItem } from "taro-ui"
import { useProfile } from "src/state/profile";
import { Fragment } from "react";

import './index.less'

function My() {
  const { profile, profileLoading, fetchProfile } = useProfile()
  return (
    <ScrollView
      scrollY
      scrollWithAnimation
      refresherEnabled
      refresherTriggered={profileLoading}
      onRefresherRefresh={fetchProfile}
      refresherThreshold={45}
      style={{height: '100vh'}}
    >
      <View className='header'>
        <View className='my-info'>
          <Image className='my-info__avatar' src={profile?.data.avatar || ''} />
          <View className='my-info__name'>{profile?.data.name}</View>
        </View>
      </View>
      <View className='body'>
        <AtList hasBorder={false}>
          {
            profile?.data?.roles?.includes?.('admin') &&
            <Fragment>
              <Navigator url='/pages/user/index'>
                <AtListItem title='用户管理' arrow='right' />
              </Navigator>
              <Navigator url='../../subpackages/pages/category/index'>
                <AtListItem title='分类管理' arrow='right' />
              </Navigator>
              <Navigator url='../../subpackages/pages/food-manage/index'>
                <AtListItem title='菜品管理' arrow='right' />
              </Navigator>
              <Navigator url='/pages/mix-ingredient-manage/index'>
                <AtListItem title='准备材料管理' arrow='right' />
              </Navigator>
              <Navigator url='/pages/base-ingredient/index'>
                <AtListItem title='基础调料管理' arrow='right' />
              </Navigator>
            </Fragment>
          }
        </AtList>
      </View>
    </ScrollView>
  );
}

export default My;
